<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小说</title>
    <link rel="stylesheet" href="./fontX/iconfont.css">

    <style>

.icon {
          width: 1em;
          height: 1em;
          vertical-align: -0.15em;
          fill: currentColor;
          overflow: hidden;
        }
        body,ul,p{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: #000;
        }
        #bnav{
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: #fff;
            z-index:9;
            border-top: rgb(200, 200, 200) solid 1px;  
        }
        #body{
            margin-bottom: 50px;/*值为下导航高度*/
        }
        #bnav ul{
            display: flex;
        }
        #bnav li{
            width: 25%;
            text-align: center;      
        }
       
        #bnav svg{
            font-size: 30px;
            margin: 5px auto;
        }
        #bnav p{
            font-size: 14px;
            line-height: 22px;    
        }

         /* 上界面 */
         .TOP{
            width: 100%;
            height: 30px;
            color: #000;
            background-color:#fff;

        }

        .icon-HD{
          
            font-size: 20px;
        }
        .icon-wifi{
            font-weight: bold;

        }
        .icon-aixin1{
    
            margin-left: 70px;

        }
        .icon-yanjing{
            font-weight: bold;

        }
        .icon-lanya{
            font-weight: bold;

        }
        .ZGLT{
            font-size: 12px;
            margin-left: 15px;
        }


           /* 搜索栏 */

           #header{
            display: flex;
            width: 100%;
            background-color: #fff;
            margin-top:0;
        }
      
        #header div{
            flex-grow: 1;
            background-color: rgb(209, 211, 219);
            display: flex;
            color: #000;
            border: none;
            outline: none;
            line-height: 30px;
            font-size: 14px;
            border-radius: 18px;

        }
        #header div span{
            font-size: 12px;
            margin: 0 9px;
            line-height: 30px;
            color: #000;
           
        }
        #header input{
            border: none;
            outline: none;
            background-color: rgb(145, 146, 150);
            line-height: 30px;
            flex-grow: 1;
            border-radius: 18px;
            font-size: 14px;
        }
        .FLL{
            width: 70%;
            margin-left: 5px;
            margin-right: 10px;
        }
        .FLA{
            width: 30%;
           
        }


        /* tab选项卡 */
        .tab{
            width: 100%;
            color: #000;
          
           
        }
        .tt{
            display: flex;
        }
        .tt span{
            margin-top: 10px;
            margin-left: 20px;
            width:80px;
            line-height: 33px;
            text-align: left;
            font-size: 18px;
            
          
            letter-spacing: 3px;
        }
        .tt  .cur{
            font-size: 22px; 
            font-weight: bold;
            color:#000;
            margin-bottom: -1px;
          
        }
        .tc{
            height: 180px;
          
           
            text-align: center;
            list-style: none;
          
            display: none;
        }

        /* 男生小说 */
        .FM img{
            width: 93%;
            margin-top: 18px;

        }


        /* 热门 */

       
        .DDD{
            margin-top: 15px;

        }
        .JRRM{
            width: 100%;
            font-size: 22px;
            
           
            color: #000;
        
        }
        .CKQB{
            font-size: 14px;
          
            padding-left: 230px;
            color: rgb(140, 140, 142);
        } 
         .CCJ img{
            width: 89px;
            height: 110px;
            margin-top: 10px;
        }
     
        .CCJ{
            float: left;
            margin-top: 10px;
            margin-left: 11px;
        }
        p{
            font-size: 16px;
        }


        .KKNG{
            width: 100%;
            
           height:450px;
        }




        /* 畅销飙升 */
        .CXBS{
           width: 100%;
           margin-top: 390px;
         
        }
        .TUTU{
            margin-top: 10px;
            margin-left: 13px;
            padding-top: 10px;
        }

        .TUTU img{
          
           float: left;
           width: 92px;
            height: 113px;
          
        }
        .WENZI{
            width: 100%;
           text-align: left;
        }
        .PPZ{
            padding-top: 3px;
            margin-left: 110px;
            font-size: 18px;
        }
        .PPX{
            padding-top: 7px;
            padding-left: 20px;
            margin-left: 90px;
            color: rgb(143, 146, 151);

        }
        .PPC{
            padding-top: 15px;
            padding-left: 25px;
            margin-left: 85px;
            color: rgb(190, 191, 195);

        }
        .DDV{
            margin-top: 50px;

        }

        /* 女生 */
        .DDEE{
            margin-top: 250px;
       
        }
        .PAL{
            color: rgb(190, 191, 195);
            font-size: 14px;
       
        }
        .KKNS{
         
            height: 300px;

        }
        .NSCC{
            width: 100%;
            font-size: 22px;
            padding-right: 110px;
            
           
            color: #000;

        }
        .NSVV{
            font-size: 14px;
            color: rgb(140, 140, 142);
         
     

        }
        /* JSON */
        .FMD img{
            width: 93%;
            margin-top: 18px;
            

        }


    
    </style>

<script src="./fontX/iconfont.js"></script>
</head>
<body>




    <div class="TOP">
        <span class="ZGLT">中国联通</span> 
        <span class="iconfont icon-HD"></span>
        <span class="iconfont icon-xinhao"></span>
        <span class="iconfont icon-xinhao"></span>
        <span class="iconfont icon-wifi"></span>
        <span class="iconfont icon-aixin1"></span>
        <span class="iconfont icon-yanjing"></span>
        <span class="iconfont icon-lanya"></span>
        <span class="iconfont icon-zhendong"></span>
        <span class="iconfont icon-electricity-full "></span>
        <span class="iconfont icon-chongdiandian"></span>
        11:03


    </div>



    <header id="header">
        <div  class="FLL" >
            <span class="iconfont icon-sousuo"></span>
            搜索

            
            <!-- <input type="text" placeholder="灵能百分百"> -->
        </div>

        <div class="FLA">
            <span class="iconfont icon-fenlei"></span>
            分类
            

        </div>
        </header>







        <div class="tab">
            <div class="tt">
                <span class="cur">男生</span>
                <span>女生</span>
           
            </div>
            <div class="tc" style="display:block">

                <div class="FMD">
                    <!-- <img src="./图片/小说/1.png" > -->
                </div>




                <div class="DDD">
                    <span class="JRRM">本周推荐 </span>
                    <span class="CKQB">更多 <span class="iconfont icon-gengduo1"></span></span>
                  </div>
    
    
                  <div class="CCJ">
                    <img src="./图片/小说/2.png" >
                    <p>神级选择从</p>
                    <p class="PAB">双生武魂开</p>
                  </div>
    
                  <div class="CCJ">
                    <img src="./图片/小说/3.png" >
                    <p>人类灭绝后</p>
                    <p class="PAB">我成为了人</p>
                  </div>
    
                  <div class="CCJ">
                    <img src="./图片/小说/4.png" >
                    <p>末世之星际</p>
                    <p class="PAB">指挥官</p>
                  </div>
    
                  <div class="CCJ">
                    <img src="./图片/小说/5.png" >
                    <p>神级宠物进</p>
                    <p class="PAB">化系统</p>
                  </div>
    
                  <div class="CCJ">
                    <img src="./图片/小说/6.png" >
                    <p>一键修炼系</p>
                    <p class="PAB">统瞬间百万</p>
                  </div>
    
                  <div class="CCJ">
                    <img src="./图片/小说/7.png" >
                    <p>黑暗纪元</p>
                    <p class="PAB"></p>
                  </div>
    
                  <div class="CCJ">
                    <img src="./图片/小说/8.png" >
                    <p>不正经的狐</p>
                    <p class="PAB">妖</p>
                  </div>
                  <div class="CCJ">
                    <img src="./图片/小说/9.png" >
                    <p>我当方士那</p>
                    <p class="PAB">些年</p>
                  </div>








                  <div class="CXBS">


                    
                  <div class="DDD">
                    <span class="JRRM">畅销飙升</span>
                    <span class="CKQB">更多 <span class="iconfont icon-gengduo1"></span></span>
                  </div>




             


                    <div class="TUTU">
                        <img src="./图片/小说/11.png" >
                        <div class="WENZI">
                            <p class="PPZ">武魂：我开局震惊了圣魂村</p>
                            <p class="PPX">古武少年穿越斗罗大陆世界，开局震惊唐三，神级武魂、逆天功法
                             、极品魂环</p>
                             <p class="PPC">小小飞师傅|轻小说|119万字</p>
                        
                         </div>
                    </div>

                    
                    <div class="TUTU">
                        <img src="./图片/小说/22.png" >
                        <div class="WENZI">
                            <p class="PPZ">超级系统：从小蛇开始无限进化</p>
                            <p class="PPX">意外穿越荒古大陆，竟变成最弱的黑妖蛇
                             是吧是 撒桉树桉树打赏的</p>
                             <p class="PPC">夜东吴|玄幻|121万字</p>
                        
                         </div>
                    </div>

                   
                    <div class="TUTU">
                        <img src="./图片/小说/33.png" >
                        <div class="WENZI">
                            <p class="PPZ">玄幻：我的宗门怎么成了荒古禁地</p>
                            <p class="PPX">【叮，恭喜宿主获得盘古斧*10000】
                                【叮，恭喜宿主获得盘古斧*10000】</p>
                             <p class="PPC">一剑光寒十九洲|玄幻|112万字</p>
                        
                         </div>
                    </div>

              
                    
                  </div>




         
                  <div class="DDV">
                    <span class="JRRM">新书强推 </span>
                    <span class="CKQB">更多 <span class="iconfont icon-gengduo1"></span></span>
                  </div>
    
    
                  <div class="CCJ">
                    <img src="./图片/小说/44.png" >
                    <p>海贼我都快</p>
                    <p class="PAB">无敌了</p>
                  </div>
    
                  <div class="CCJ">
                    <img src="./图片/小说/55.png" >
                    <p>火影播放博</p>
                    <p class="PAB">人传忍界</p>
                  </div>
    
                  <div class="CCJ">
                    <img src="./图片/小说/66.png" >
                    <p>我进化战斗</p>
                    <p class="PAB">暴龙兽</p>
                  </div>
    
                  <div class="CCJ">
                    <img src="./图片/小说/77.png" >
                    <p>天生媚骨的</p>
                    <p class="PAB">我被病娇</p>
                  </div>
    
                  <div class="CCJ">
                    <img src="./图片/小说/88.png" >
                    <p>跟着直播学</p>
                    <p class="PAB">修仙</p>
                  </div>
    
                  <div class="CCJ">
                    <img src="./图片/小说/99.png" >
                    <p>妹妹被杀后</p>
                    <p class="PAB">我成为灭世</p>
                  </div>
    
                  <div class="CCJ">
                    <img src="./图片/小说/00.png" >
                    <p>那就让他们</p>
                    <p class="PAB">全员恶堕</p>
                  </div>
                  <div class="CCJ">
                    <img src="./图片/小说/001.png" >
                    <p>开局被富婆</p>
                    <p class="PAB">女帝盯上了</p>
                  </div>



                  <div class="KKNG"></div>
    
            
    
    
            
            
            
            
            </div>





            <div class="tc">



                <div class="FM">
                    <!-- <img src="./图片/小说/NS1.png" > -->
                </div>




                <div class="DDD">
                    <span class="JRRM">今日飙升 </span>
                    <span class="CKQB">更多 <span class="iconfont icon-gengduo1"></span></span>
                  </div>
    
    
                  <div class="CCJ">
                    <img src="./图片/小说/NS2.png" >
                    <p>宿敌看我的</p>
                    <p>眼神逐渐变</p>
                    <p class="PAL">现代都市</p>
                  </div>
    
                  <div class="CCJ">
                    <img src="./图片/小说/NS3.png" >
                    <p>[ABO]</p>
                    <p>不思量</p>
                    <p class="PAL">古代纯爱</p>
                  </div>
    
                  <div class="CCJ">
                    <img src="./图片/小说/NS4.png" >
                    <p>重生毒妃权</p>
                    <p>倾天下</p>
                    <p class="PAL">古代言情</p>
                  </div>
    
                  <div class="CCJ">
                    <img src="./图片/小说/NS5.png" >
                    <p>参加分手综</p>
                    <p>艺后我翻红</p>
                    <p class="PAL">现代都市</p>
                  </div>




                  
                <div class="DDEE">
                    <span class="NSCC">12月纯爱畅销TOP10 </span>
                    <span class="NSVV">更多 <span class="iconfont icon-gengduo1"></span></span>
                  </div>
    
    
                  <div class="CCJ">
                    <img src="./图片/小说/NS6.png" >
                    <p>重生后宿敌</p>
                    <p>成了男朋友</p>
                    <p class="PAL">重生</p>
                  </div>
    
                  <div class="CCJ">
                    <img src="./图片/小说/NS7.png" >
                    <p>穿成反派却</p>
                    <p>不小心拿了</p>
                    <p class="PAL">穿书</p>
                  </div>
    
                  <div class="CCJ">
                    <img src="./图片/小说/NS8.png" >
                    <p>你的信息素</p>
                    <p>不太对</p>
                    <p class="PAL">ABO</p>
                  </div>
    
                  <div class="CCJ">
                    <img src="./图片/小说/NS9.png" >
                    <p>觉醒后我成</p>
                    <p>了恋综万人</p>
                    <p class="PAL">穿书</p>
                  </div>




                  
                <div class="DDEE">
                    <span class="NSCC">12月橘味畅销TOP10 </span>
                    <span class="NSVV">更多 <span class="iconfont icon-gengduo1"></span></span>
                  </div>
    
    
                  <div class="CCJ">
                    <img src="./图片/小说/NS10.png" >
                    <p>被原配捉到</p>
                    <p>之后</p>
                    <p class="PAL">双向暗恋</p>
                  </div>
    
                  <div class="CCJ">
                    <img src="./图片/小说/NS11.png" >
                    <p>恶役千金与</p>
                    <p>黑莲花</p>
                    <p class="PAL">恋爱</p>
                  </div>
    
                  <div class="CCJ">
                    <img src="./图片/小说/NS12.png" >
                    <p>薛定谔的猫</p>
                 
                    <p class="PAL">病娇</p>
                  </div>
    
                  <div class="CCJ">
                    <img src="./图片/小说/NS13.png" >
                    <p>奈何公主太</p>
                    <p>腹黑</p>
                    <p class="PAL">公主</p>
                  </div>





                  <div class="DDEE">
                    <span class="NSCC">12月言情畅销TOP10</span>
                    <span class="NSVV">更多 <span class="iconfont icon-gengduo1"></span></span>
                  </div>
    
    
                  <div class="CCJ">
                    <img src="./图片/小说/NS14.png" >
                    <p>本师姐血条</p>
                    <p>超厚</p>
                    <p class="PAL">重生</p>
                  </div>
    
                  <div class="CCJ">
                    <img src="./图片/小说/NS15.png" >
                    <p>我把皇子养</p>
                    <p>黑化了</p>
                    <p class="PAL">扮猪吃老虎</p>
                  </div>
    
                  <div class="CCJ">
                    <img src="./图片/小说/NS16.png" >
                    <p>王爷深信我</p>
                    <p>爱他成瘾</p>
                    <p class="PAL">穿书</p>
                  </div>
    
                  <div class="CCJ">
                    <img src="./图片/小说/NS17.png" >
                    <p>炮灰逆袭手</p>
                    <p>册</p>
                    <p class="PAL">马甲</p>
                  </div>



                  <div class="KKNS"></div>





                 
                  



            </div>
   
 
   










    <nav id="bnav">
        <ul>
            <li>
                <a href="./三级项目.html">
                    <span>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shouye1"></use>
                  </svg>
                </span>
                <p>首页</p>
            </a>
            </li>
            <li>
                <a href="./xiaoshuo.html">
                    <span>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-gouwudai"></use>
                  </svg>
                </span>
                <p>小说</p>
            </a>
            </li>
            <li>
                <a href="./shujia.html">
                    <span>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-tushuqikan"></use>
                  </svg>
                </span>
                <p>书架</p>
            </a>
            </li>
            <li>
                <a href="./wode.html">
                    <span>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-bilibili-line"></use>
                  </svg>
                </span>
                <p>我的</p>
            </a>
            </li>
        </ul>
    </nav>



    <script src="./js/tabs.js"></script>


<!-- JSON -->
    <!-- <div class="FM">
        <img src="./图片/小说/1.png" >
    </div> -->
    <!-- <img src="./图片/小说/NS1.png" > -->


    <script>
        var jarrC=[{
            img:"./图片/小说/1.png",
        }];
        var FMD=document.querySelector(".FMD");
        //dom找jslist
        jarrC.forEach((v,i)=>{
            var nli=document.createElement("li");
            nli.innerHTML=`
            <img src="${v.img}" >
            `;
            FMD.appendChild(nli);
        })
    
    </script>

<script>
    var jarrD=[{
        img:"./图片/小说/NS1.png",
    }];
    var FM=document.querySelector(".FM");
    //dom找jslist
    jarrD.forEach((v,i)=>{
        var nli=document.createElement("li");
        nli.innerHTML=`
        <img src="${v.img}" >
        `;
        FM.appendChild(nli);
    })

</script>
    
    
</body>
</html>